<template>
  <div class="traffic-hot-spots" :style="{display:displaystatus}">
    <div class="tab-container">
      <div :class="activeItem0" @click="changeTabItem('item0')">拥堵热点</div>
      <div :class="activeItem1" @click="changeTabItem('item1')">交通警情</div>
      <div :class="activeItem2" @click="changeTabItem('item2')">交通管制</div>
      <div :class="activeItem3" @click="changeTabItem('item3')">施工占道</div>
      <div class="clear-both"></div>
    </div>
    <div class="traffic-info-container">
      <div v-if="activeItem=='item0'" class="item-title">
        <div class="item-cell-title">平均速度</div>
        <div class="item-cell-title">拥堵距离</div>
        <div class="item-cell-title">拥堵时间</div>
        <div class="item-cell-title">持续时间</div>
        <div class="clear-both"></div>
        <hot-item  v-for="info in hotItemInfo" v-bind:info="info"></hot-item>
      </div>
      <div v-if="activeItem=='item1'">交通警情</div>
      <div v-if="activeItem=='item2'">交通管制</div>
      <div v-if="activeItem=='item3'">施工占道</div>
    </div>
  </div>
</template>

<script>
  import HotItem from './HotSpotComponent/HotItem'
  import * as globals from '../global'
  import {mapGetters} from 'vuex'

  export default{
    name: "TrafficHotSpots",
    data(){
      return {
        msg: '我是侧边栏',
        activeItem: 'item0',
        refresh_interval: null,
        items: [
          {message: 'foo'},
          {message: 'Bar'}
        ]
      }
    },
    components: {
      HotItem,
    },
    methods: {
      changeTabItem(id){
        this.activeItem = id;
      }
    },

    mounted(){
      console.log("TrafficHotSpots mounted")
      this.$store.dispatch('getHotSpotList')
      if (!this.refresh_interval) {
        this.refresh_interval = setInterval(()=> {
          this.$store.dispatch('getHotSpotList')
        }, 1000 * 60 * 1);
      }
    },

    destroyed () {
      clearInterval(this.refresh_interval);
    },
    computed: {
      ...mapGetters({
        hotItemInfo: 'hotSpotList',
        mapbodyfullstatus:'mapbodyfullstatus',
      }),
      displaystatus(){
        return this.mapbodyfullstatus? 'none':'table-row'
      },
      activeItem0: function () {
        return {
          active: this.activeItem === 'item0',
          'tab-item': true
        }
      },
      activeItem1: function () {
        return {
          active: this.activeItem === 'item1',
          'tab-item': true
        }
      },
      activeItem2: function () {
        return {
          active: this.activeItem === 'item2',
          'tab-item': true
        }
      },
      activeItem3: function () {
        return {
          active: this.activeItem === 'item3',
          'tab-item': true
        }
      },

    }
  }
</script>
<style scope>
  ul{
    padding: 0;
    margin: 0;
  }
  .clear-both {
    clear: both;
  }

  .traffic-hot-spots {
    width: 280px;
    height: 100%;
    overflow-y: scroll;
    box-sizing: content-box;
    overflow-x: hidden;
    z-index:1px;
  }

  .tab-container {
    padding-top: 5px;
    width: 270px;
    cursor: pointer;
    font-size: 12px;
    padding-bottom: 5px;
  }

  .tab-item {
    border-bottom: 2px solid #40c0f5;
    display: table-cell;
    width: 25%;
    text-align: center;
    float: left;
    height: 26px;
    line-height: 26px;
    box-sizing: border-box;
  }

  .tab-item:hover {
    background-color: #dddddd;
  }

  .active {
    border-bottom: 0;
    border-top: 2px solid #40c0f5;
    border-left: 1px solid #40c0f5;
    border-right: 1px solid #40c0f5;
  }

  .traffic-info-container {

  }

 .item-cell-title{
   width: 67px;
   display: table-cell;
   text-align: center;
   height: 20px;
   line-height: 20px;
   font-size: 12px;
   background-color: gainsboro;
   border-left: 1px solid #333333;
 }

</style>
